<template>
  <div class="questions">
    <transition-group tag="div" class="wrapper" id="questions">
      <div v-for="(question, index) in questions" :key="index" class="question">
        <!-- <v-touch tag="div" class="touch"
          v-on:swipeleft="swipeLeft"
          v-on:swiperight="swipeRight">
        </v-touch> -->
        <type1 v-if="question.type === 1" :question='question' @next="swipeLeft" @sendResult="sendResult" @pushResult="pushResult"></type1>
        <type2 v-else-if="question.type === 2" :question='question' @next="swipeLeft" @sendResult="sendResult" @pushResult="pushResult"></type2>
        <type3 v-else-if="question.type === 3" :question='question' @next="swipeLeft" @sendResult="sendResult" @pushResult="pushResult"></type3>
        <type4 v-else-if="question.type === 4" :question='question' @next="swipeLeft" @sendResult="sendResult" @pushResult="pushResult"></type4>
        <type5 v-else-if="question.type === 5" :question='question' @next="swipeLeft" @sendResult="sendResult" @pushResultList="pushResultList"></type5>
        <type6 v-else-if="question.type === 6" :question='question' @next="swipeLeft" @sendResult="sendResult" @pushResult="pushResult"></type6>
        <type7 v-else-if="question.type === 7" :question='question' @next="swipeLeft" @sendResult="sendResult" @pushResult="pushResult"></type7> 
      </div>
    </transition-group>
    <div class="pagination">
      <li v-for="i in questionLength + 1" :key="i"
      :class="[i === questionNow + 1 ? 'active' : '']"></li>
    </div>
    <svg class="icon" aria-hidden="true" @click="goHome">
      <use xlink:href="#icon-fanhui"></use>
    </svg>
  </div>
</template>

<script>
import {findSurvey, writeSurvey} from '@/api/survey'
import type1 from './type1'           // 单选题
import type2 from './type2'           // 多选题
import type3 from './type3'           // 滑动题
import type4 from './type4'           // 定量题
import type5 from './type5'           // 排序题
import type6 from './type6'           // 选图题
import type7 from './type7'           // 填写题
import {check} from '@/api/common'

export default {
  name: 'question',
  data () {
    return {
      questionNow: 0,                  // 当前显示的问题
      surveyId: 0,
      uid: localStorage.uid,
      writeReqVoList: [],
      questions: [
        {
          id: 0,
          imgUrl: '',
          isSkip: 0,
          questionName: '',
          sort: 0,
          type: 0,
          optionList: [
            {
              id: 0,
              isCard: 0,
              optionName: '',
              position: 0
            }
          ]
        }
      ]
    }
  },
  computed: {
    questionLength () {
      return this.questions.length - 1
    }                                 // 问题列表长度
  },
  components: {
    type1,
    type2,
    type3,
    type4,
    type5,
    type6,
    type7
  },                                  // 问题显示组件
  created () {
    this.initial()
  },
  methods: {
    goHome () {
      if (this.questionNow === 0) {
        this.$router.go(-1)
      } else {
        this.swipeRight()
      }
    },                               // 返回首页
    swipeLeft () {
      if (this.questionNow < this.questionLength) {
        this.questionNow++
        this._translate()
      } else {
        this.sendResult()
      }
    },                               // 左滑
    swipeRight () {
      if (this.questionNow > 0) {
        this.questionNow--
        this._translate()
      }
    },                               // 右滑
    _translate () {
      let distance = -100 * this.questionNow
      document.getElementById('questions').style.transform = `translateX(${distance}vw)`
    },                               // 滑动
    pushResult (result) {
      this.writeReqVoList.push(result)
    },
    pushResultList (resultList) {
      resultList.forEach(result => {
        this.pushResult(result)
      })
    },
    sendResult () {
      let formData = {
        data: {
          surveyId: this.surveyId,
          uid: localStorage.uid,
          writeReqVoList: this.writeReqVoList
        },
        token: localStorage.token
      }
      writeSurvey(JSON.stringify(formData)).then(
        (data) => {
          var result = check(data)
          if (typeof (result) === 'boolean') {
            this.$router.push({
              name: 'homeIndex'
            })
          }
        }
      )
    },
    initial () {
      let id = this.$route.params.id
      this.surveyId = id
      let formData = {
        data: {
          uid: localStorage.uid,
          surveyId: id
        },
        token: localStorage.token
      }
      findSurvey(JSON.stringify(formData)).then(
        (data) => {
          this.questions = data.data.data
        }
      )
    }                                // 初始化数据
  }
}
</script>

<style lang="scss" scoped>
.questions {
  width: 100vw;
  overflow-x: hidden;
  background-color: #fff;
}
.touch {
  position: fixed;
  top: 80px;
  width: 100vw;
  height: 100vw;;
}
.wrapper {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s;
}
.question {
  flex: none;
  width: 100vw;
}
.pagination {
  position: absolute;
  top: 30px;
  left: 0;
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: center;
  li {
    list-style: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #aaa;
    margin-right: 20px;
    &.active {
      background-color: #555;
    }
  }
}
.icon {
  position: absolute;
  top: 15px;
  left: 30px;
  width: 40px;
  height: 40px;
  color: #555;
}
</style>
